<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<title>DataOne DataUsage and Citation Visualization</title>
<script type="text/javascript"
	src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.jqplot.min.js"></script>
<script type="text/javascript"
	src="js/plugins/jqplot.dateAxisRenderer.min.js"></script>
<script type="text/javascript" src="js/plugins/jqplot.cursor.min.js"></script>
<script type="text/javascript"
	src="js/plugins/jqplot.highlighter.min.js"></script>
	<script type="text/javascript" src="js/plugins/jqplot.barRenderer.min.js"></script>
<script type="text/javascript" src="js/plugins/jqplot.pieRenderer.min.js"></script>
<script type="text/javascript" src="js/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script type="text/javascript" src="js/plugins/jqplot.pointLabels.min.js"></script>
<script type="text/javascript" src="js/plugins/jqplot.ohlcRenderer.min.js"></script>
<script type="text/javascript" src="js/jquery-ui/js/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.jqplot.min.css" />
<link rel="stylesheet" type="text/css" href="css/basic.css" />
<link rel="stylesheet" type="text/css" href="js/jquery-ui/css/ui-lightness/jquery-ui.min.css" />
<script type="text/javascript">
	function Docfunc() {
		var temp_id=$("#identifier").val();
		if(temp_id==null||temp_id=="")
		{
			alert('Please input an identifier!');
			return false;
		}
		var value=12;
		$("#Docload").html("loading...");
		$("#docdisplay").html("");
		var re1=/\//g;
		var re2=/\./g;
		var identifier=temp_id.replace(re1,"|");
		identifier=identifier.replace(re2,"&");
		$.ajax({
			type : "GET",
			url : "metric/dataone_doc/" + identifier,
			success : function(response) {
				$("#Docload").html("");
				$("#Docchart").html("");
				$("#docdisplay").html(response);
			},
			error : function(e) {
				alert('Error: ' + e);
			}
		});
	}
	function CNfunc(name) {

		var value=6;
		$("#CNdisplay").html("");
		$("#CNload").html("loading...");
		var radioes = document.getElementsByName(name);
		for(i=0;i<radioes.length;i++){
			
     if(radioes[i].checked){
     	value=radioes[i].value;
     }
}
		$.ajax({
			type : "GET",
			url : "metric/cn/" + value,
			success : function(response) {
				$("#CNload").html("");
				$("#CNdisplay").html(response);
			},
			error : function(e) {
				alert('Error: ' + e);
			}
		});
	}
	function MNfunc(name) {
		var value=6;
		$("#MNchart").html("");
		$("#MNload").html("loading...");
		var radioes = document.getElementsByName(name);
		for(i=0;i<radioes.length;i++){
			
     if(radioes[i].checked){
     	value=radioes[i].value;
     }
}
		$.ajax({
			type : "GET",
			url : "metric/mn/" + $("#mnodelist").val() +"/"+ value,
			success : function(response) {
				$("#MNload").html("");
				$("#MNdisplay").html(response);
			},
			error : function(e) {
				alert('Error: ' + e);
			}
		});
	}
</script>
</head>
<body>
	<div id="container">
		<div id="header">
		</div>
		<div id="navigator">
			<ul>
				<li><a href="http://www.dataone.org/">Home</a></li>
				<li><a href="http://www.dataone.org/about">About Us</a></li>
				<li><a href="http://www.dataone.org/contact">Contact Us</a></li>
				<li><a href="http://www.dataone.org/site-map">Site Map</a></li>

			</ul>
		</div>
		<div id="main-content">
			<div id="main-title">
				<h2>Welcome to DataONE Data Usage and Citation Visualization
					Website</h2>
			</div>

			<div id="CNode-display">
				<form id="CNtimespan-form">
Timespan:
<input type="radio" name="CNts" value="6" checked>6 m</input>
<input type="radio" name="CNts" value="12">12 m</input>
<input type="radio" name="CNts" value="18">18 m</input>
<input type="radio" name="CNts" value="24">24 m</input>
<input id="CNtimebutton" type="button" value="select" onclick="CNfunc('CNts');"></input>
</form>
				<div id="CNload">loading...</div>
            <div id="CNdisplay">
            </div><script type="text/javascript">
		$('#CNdisplay').load('metric/cn/6',function() {$("#CNload").html("");});
	</script>
            
            
			</div>
			<div id="MNode-display">
				
				<form id="mnode-form">
Member Nodes:
<select id="mnodelist">
</select><br></br>
Timespan:
<input type="radio" name="MNts" value="6" checked>6 m</input>
<input type="radio" name="MNts" value="12">12 m</input>
<input type="radio" name="MNts" value="18">18 m</input>
<input type="radio" name="MNts" value="24">24 m</input>
<input  id="MNformbutton" type="button" value="select" onclick="MNfunc('MNts');"></input>
</form>
<div id="MNload">loading...</div>
				<div id="MNchart" class="jqplot-target"></div>
            <div id="MNdisplay"></div>
            <script type="text/javascript">
		$('#MNdisplay').load('metric/mn/6',function() {$("#MNload").html("");});
	</script>

			</div>
			
			<div id="doc-display">
                    <div id="doc-part-title">Document Metric Report Generator</div>
                    <div id="input-form">
                         <form id="doc-form"><br>Document Identifier:</br></br>
                         <input type="text" id="identifier" size="12">
                         
                         <input type="button" value="go" onclick="Docfunc();">
                         </form>
                    </div>
                    
                    <div id="doc-metric-display">
<div id="Docload"></div>
<div id="Docchart" class="jqplot-target" style="margin-left:20px;margin-top:30px;"></div>
<div id="docdisplay"></div>
<script type="text/javascript">
		$('#docdisplay').load('metric/doc');
	</script>                  
                </div>
			</div>
		</div>
		<div id="footer">
<div id="thanks"><label style="margin-left:20px;">Thanks</label><a href="http://total-impact.org/"><img src="images/ti_logo.png" style="margin-left:20px;margin-top:15px;"width="260px" height="50px" ></a></div>
<div id="follow">
Follow DataONE on:<br><a href="http://www.facebook.com/pages/DataONE/156940701015997">
<img src="images/facebook.png" style="margin-top:15px;" width="50px" height="50px"></a>
<a href="http://twitter.com/#!/Dataoneorg">
<img src="images/twitter.png" style="margin-left:30px;"width="50px" height="50px" ></a>
<a href="http://www.linkedin.com/groups?gid=1872174&mostPopular=&trk=tyah">
<img src="images/in.png" style="margin-left:30px;"width="50px" height="50px" ></a>
<a href="feed://www.dataone.org/rss">
<img src="images/RSS.png" style="margin-left:30px;"width="50px" height="50px" ></a>
</div>
<div id="d1-info" >DataONE is a collaboration among many partner organizations, and is funded by the US National Science Foundation (NSF) under a Cooperative Agreement.
<br>1312 Basehart Dr SE 1 University of New Mexico Albuquerque, NM 87106 </div>
		</div>
	</div>

</body>
</html>